import React, { PureComponent } from 'react';
import { connect } from 'dva';
import entities from 'entities';
import { Modal, Row, Col } from 'antd';
import styles from './index.less';

@connect(state => ({
  visible: state.auction.customAuctionModal.visible,
  currentKey: state.auction.customAuctionModal.currentKey,
}))
  
export default class CustomAuctionModal extends PureComponent {
  state = {
    current:1,
    itemList:[],
    pageSize:10,
    realTotal:1,
    total:1
  }
 
  componentWillReceiveProps(nextProps) {
    if (nextProps.k === nextProps.currentKey) {
      if (!this.props.visible && nextProps.visible) {
        const nicaiCrx = document.getElementById('nicaiCrx');
        nicaiCrx.addEventListener('setCustomAuction', this.setCustomAuction);
         if (!this.state.nicaiCrx) {
          this.setState({ nicaiCrx }, () => {
            this.handleGetCustomAuction();
          });
        }
      } else if (this.props.visible && !nextProps.visible) {
        const { nicaiCrx } = this.state;
        nicaiCrx.removeEventListener('setCustomAuction', this.setCustomAuction);
        this.setState({
          nicaiCrx: null,
        });
      }
    }
  }

  setCustomAuction = (e) => {
    const data = JSON.parse(e.target.innerText);
    console.log(data);
    this.setState({
      itemList: data.data.itemList,
      current: data.data.current,
      pageSize: data.data.pageSize,
      realTotal: data.data.realTotal,
      total: data.data.total
    })
  }
  handleChooseItem = (val) => {
    console.log(val);
    this.handleCancel();
    if (this.props.onOk) this.props.onOk([val]);
  }
  handleCancel = () => {
    this.props.dispatch({
      type: 'auction/changeCustomAuctionVisible',
      payload:{ visible: false }
    });
  }
  handleRequestNicaiCrx = (params) => {
    this.state.nicaiCrx.innerText = JSON.stringify(params);
    const customEvent = document.createEvent('Event');
    customEvent.initEvent('taobaoRequest', true, true);
    this.state.nicaiCrx.dispatchEvent(customEvent);
  }
  handleGetCustomAuction = () => {
    this.handleRequestNicaiCrx({
      url: `https:${this.props.api}`,
      type: 'GET',
      // data: {
      //   q: '',
      //   __version__: '3.0',
      //   resourceType: 'Pic',
      //   ...params,
      // },
      actionName: 'setCustomAuction',
    });
  }
  render() {
    const { visible, k, currentKey } = this.props;
    const { itemList, current, pageSize, total } = this.state;
    console.log(this.props);
    return (
      <Modal
        title="添加自定义段落"
        width="1000px"
        visible={k === currentKey && visible}
        onCancel={this.handleCancel}
        style={{ top: 40 }}
        bodyStyle={{ padding: '0 20px', position: 'relative', }}
        footer={null}
      >
        <div>
          <div style={{ marginBottom: 10, height:'500px' }}>
            <div className="gutter-example">
              <Row gutter={16}>
                {itemList.map((item, index) => <Col className="gutter-row" style={{marginTop:'20px'}} span={6} key={index} onClick={() => this.handleChooseItem(item)}>
                  <div className="gutter-box" style={{border: '1px solid #e7e6eb'}}>
                    <div>
                      <img style={{width:'100%'}} src={item.coverUrl}/>
                    </div>
                    <div style={{width:'100%',padding:'5px 10px',backgroundColor:'#e7e6eb'}}>
                      {item.title}
                    </div>
                  </div>
                </Col>)}
              </Row>
            </div>
          </div>
        </div>
      </Modal>
    );
  }
}
